import React from "react";
import { createStore } from "redux";
import {
  Provider,
  createStoreHook,
  createDispatchHook,
  createSelectorHook,
} from "react-redux";
export const MyContext = React.createContext({ abc: 1 }); // 这里初始化的值有什么用？

export const useStore = createStoreHook(MyContext);
export const useDispatch = createDispatchHook(MyContext);
export const useSelector = createSelectorHook(MyContext);

function rootReducer(state = { count: 0 }, action) {
  const count = state.count;
  switch (action.type) {
    case "increase":
      return { count: count + 1 };
    default:
      return state;
  }
}

const myStore = createStore(rootReducer, { count: 111, from: "counter.new" });

export function MyProvider({ children }) {
  /* 这里只有value可用，其他的属性是没用的 */
  return (
    <MyContext.Provider value={{ abc: 123 }} xxx={{ ccc: 222 }}>
      <Provider store={myStore} context={MyContext}>
        {children}
      </Provider>
      {/* Consumer下面只能这么写，就连一个简单的div标签包裹都不可以 */}
      <MyContext.Consumer>
        {(props) => {
          console.log("consumer props 2", props); // 这里的props可以获取到 value
          debugger;
          return <div>from consumer</div>;
        }}
      </MyContext.Consumer>
    </MyContext.Provider>
  );
}
